<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><title>TypeScript学习笔记 | 荒芜</title><meta name="author" content="阿龙"><meta name="copyright" content="阿龙"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="1.TypeScript基础知识1.基本类型&#x2F;&#x2F; 字符串类型&#x2F;&#x2F; 你还可以使用模版字符串，它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围（ &#96;），并且以$&amp;#123; expr &amp;#125;这种形式嵌入表达式let str:string &#x3D; &quot;张三&quot;&#x2F;&#x2F; 数字类型 let decLiteral: number &#x3D; 6;let hexLiteral: number &#x3D;">
<meta property="og:type" content="article">
<meta property="og:title" content="TypeScript学习笔记">
<meta property="og:url" content="https://beifeng.gitee.io/2023/05/05/TypeScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/index.html">
<meta property="og:site_name" content="荒芜">
<meta property="og:description" content="1.TypeScript基础知识1.基本类型&#x2F;&#x2F; 字符串类型&#x2F;&#x2F; 你还可以使用模版字符串，它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围（ &#96;），并且以$&amp;#123; expr &amp;#125;这种形式嵌入表达式let str:string &#x3D; &quot;张三&quot;&#x2F;&#x2F; 数字类型 let decLiteral: number &#x3D; 6;let hexLiteral: number &#x3D;">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://beifeng.gitee.io/img/avatar.jpg">
<meta property="article:published_time" content="2023-05-05T02:01:39.000Z">
<meta property="article:modified_time" content="2023-05-09T07:23:22.208Z">
<meta property="article:author" content="阿龙">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://beifeng.gitee.io/img/avatar.jpg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://beifeng.gitee.io/2023/05/05/TypeScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":false,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":50,"languages":{"author":"作者: 阿龙","link":"链接: ","source":"来源: 荒芜","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  }
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'TypeScript学习笔记',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-05-09 15:23:22'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/css/background.css"><meta name="generator" content="Hexo 6.3.0"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/loading.gif" data-original="/img/avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">2</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fa fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fa fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fa fa-folder-open"></i><span> 分类</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('/img/bgc.jpeg')"><nav id="nav"><span id="blog-info"><a href="/" title="荒芜"><span class="site-name">荒芜</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fa fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fa fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fa fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fa fa-folder-open"></i><span> 分类</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">TypeScript学习笔记</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-05-05T02:01:39.000Z" title="发表于 2023-05-05 10:01:39">2023-05-05</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-05-09T07:23:22.208Z" title="更新于 2023-05-09 15:23:22">2023-05-09</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">7.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>31分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="TypeScript学习笔记"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="1-TypeScript基础知识"><a href="#1-TypeScript基础知识" class="headerlink" title="1.TypeScript基础知识"></a>1.TypeScript基础知识</h2><h2 id="1-基本类型"><a href="#1-基本类型" class="headerlink" title="1.基本类型"></a>1.基本类型</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 字符串类型</span></span><br><span class="line"><span class="comment">// 你还可以使用模版字符串，它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围（ `），并且以$&#123; expr &#125;这种形式嵌入表达式</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">str</span>:string = <span class="string">&quot;张三&quot;</span></span><br><span class="line"><span class="comment">// 数字类型 </span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">decLiteral</span>: number = <span class="number">6</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">hexLiteral</span>: number = <span class="number">0xf00d</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">binaryLiteral</span>: number = <span class="number">0b1010</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">octalLiteral</span>: number = <span class="number">0o744</span>;</span><br><span class="line"><span class="comment">// 数组</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">list</span>:number[] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line">  <span class="comment">// 第二种方式是使用数字泛型</span></span><br><span class="line">  <span class="keyword">let</span> <span class="attr">list</span>:<span class="title class_">Array</span>&lt;number&gt; = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"><span class="comment">// 布尔值</span></span><br><span class="line">  <span class="keyword">let</span> <span class="attr">b</span>:boolean = <span class="literal">false</span></span><br><span class="line">  <span class="comment">// 空置 (只有两个:undefined,null)</span></span><br><span class="line">  <span class="keyword">let</span> <span class="attr">u</span>:<span class="keyword">void</span> = <span class="literal">undefined</span></span><br><span class="line">  <span class="keyword">let</span> <span class="attr">u</span>:<span class="keyword">void</span> = <span class="literal">null</span></span><br><span class="line">  <span class="comment">// 还可以用于函数，加了void表示返回值为空或者不写，否则报错</span></span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">fnVoid</span>(<span class="params"></span>):<span class="keyword">void</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">123</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">fnVoid</span>()</span><br><span class="line">  <span class="comment">// null</span></span><br><span class="line">  <span class="keyword">let</span> <span class="attr">n</span>:<span class="literal">null</span> = <span class="literal">null</span></span><br><span class="line">  <span class="comment">// undefined</span></span><br><span class="line">  <span class="keyword">let</span> <span class="attr">u</span>:<span class="literal">undefined</span> = <span class="literal">undefined</span></span><br></pre></td></tr></table></figure>

<h3 id="2-任意类型"><a href="#2-任意类型" class="headerlink" title="2.任意类型"></a>2.任意类型</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// any类型可以写任何的基本类型，可以随意赋值</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">anys</span>:any = <span class="string">&quot;zs&quot;</span></span><br><span class="line"></span><br><span class="line">anys = <span class="number">18</span></span><br><span class="line">anys = <span class="literal">true</span></span><br><span class="line">anys = &#123;&#125;</span><br><span class="line">anys = []</span><br><span class="line"></span><br><span class="line"><span class="comment">// unknown类型</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">unknow</span>:unknown = &#123;<span class="attr">a</span>:<span class="number">111</span>&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(unknow.<span class="property">a</span>) <span class="comment">// unknown不同读取属性和赋值属性</span></span><br></pre></td></tr></table></figure>

<h3 id="3-接口和对象类型"><a href="#3-接口和对象类型" class="headerlink" title="3.接口和对象类型"></a>3.接口和对象类型</h3><p><strong>在typescript中，我们定义对象的方式要用关键字interface（接口），用interface来定义一种约束，让数据的结构满足约束的格式</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//这样写是会报错的 因为我们在person定义了a，b但是对象里面缺少b属性</span></span><br><span class="line"><span class="comment">//使用接口约束的时候不能多一个属性也不能少一个属性</span></span><br><span class="line"><span class="comment">//必须与接口保持一致</span></span><br><span class="line">interface <span class="title class_">Person</span> &#123;</span><br><span class="line">    <span class="attr">b</span>:string,</span><br><span class="line">    <span class="attr">a</span>:string</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> <span class="attr">person</span>:<span class="title class_">Person</span>  = &#123;</span><br><span class="line">    <span class="attr">a</span>:<span class="string">&quot;213&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 重名interface 可以合并</span></span><br><span class="line">interface A&#123;<span class="attr">name</span>:string&#125;</span><br><span class="line">interface A&#123;<span class="attr">age</span>:number&#125;</span><br><span class="line"><span class="keyword">var</span> <span class="attr">x</span>:A&#123;<span class="attr">name</span>:<span class="string">&#x27;xx&#x27;</span>,<span class="attr">age</span>:<span class="number">20</span>&#125;</span><br><span class="line"><span class="comment">// 继承</span></span><br><span class="line">interface A&#123;</span><br><span class="line">  <span class="attr">name</span>:string</span><br><span class="line">&#125;</span><br><span class="line">interface B <span class="keyword">extends</span> A&#123;</span><br><span class="line">  <span class="attr">age</span>:number</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">obj</span>:B=&#123;</span><br><span class="line">  <span class="attr">age</span>:<span class="number">18</span>,</span><br><span class="line">  <span class="attr">name</span>:<span class="string">&#x27;string&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="3-1-可选属性-使用？操作符"><a href="#3-1-可选属性-使用？操作符" class="headerlink" title="3.1 可选属性 使用？操作符"></a>3.1 可选属性 使用？操作符</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 可选属性的含义是该属性可以不存在</span></span><br><span class="line">interface <span class="title class_">Person</span>&#123;</span><br><span class="line"> 	b?:string,</span><br><span class="line">  <span class="attr">a</span>:string</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">person</span>:<span class="title class_">Person</span>=&#123;</span><br><span class="line">  <span class="attr">a</span>:<span class="string">&#x27;123&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="3-2-任意属性-propName-string"><a href="#3-2-任意属性-propName-string" class="headerlink" title="3.2 任意属性[propName:string]"></a>3.2 任意属性[propName:string]</h3><p><strong>需要注意的是，一旦定义了任意属性，那么确定属性的类型都必须是它的类型的子集</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 在这个例子中我们看到接口中并没有定义C但是并没有报错</span></span><br><span class="line"><span class="comment">// 因为我们定义了[propName:sting]:any</span></span><br><span class="line"><span class="comment">// 允许添加新的任意属性</span></span><br><span class="line">interface <span class="title class_">Person</span>&#123;</span><br><span class="line">  b?:string,</span><br><span class="line">  <span class="attr">a</span>:string,</span><br><span class="line">  [<span class="attr">propName</span>:string]:any</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">person</span>:<span class="title class_">Person</span>=&#123;</span><br><span class="line">  <span class="attr">a</span>:<span class="string">&#x27;123&#x27;</span>,</span><br><span class="line">  <span class="attr">c</span>:<span class="string">&#x27;123&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="3-3-只读属性-readonly"><a href="#3-3-只读属性-readonly" class="headerlink" title="3.3 只读属性 readonly"></a>3.3 只读属性 readonly</h3><p><strong>readonly只读属性是不允许呗赋值的智能读取</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 这样写是会报错的</span></span><br><span class="line"><span class="comment">// 因为a是只读的不允许重新赋值</span></span><br><span class="line">interface <span class="title class_">Person</span>&#123;</span><br><span class="line">  b?:string,</span><br><span class="line">  readonly <span class="attr">a</span>:string,</span><br><span class="line">  [<span class="attr">propName</span>:string]:any</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">person</span>:<span class="title class_">Person</span>=&#123;</span><br><span class="line">  <span class="attr">a</span>:<span class="string">&#x27;123&#x27;</span>,</span><br><span class="line">  <span class="attr">c</span>:<span class="string">&#x27;123&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line">person.<span class="property">a</span>=<span class="number">123</span>     </span><br></pre></td></tr></table></figure>

<h3 id="3-4-添加函数"><a href="#3-4-添加函数" class="headerlink" title="3.4 添加函数"></a>3.4 添加函数</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line">interface <span class="title class_">Person</span>&#123;</span><br><span class="line">  b?:string,</span><br><span class="line">  readonly <span class="attr">a</span>:string,</span><br><span class="line">  [<span class="attr">propName</span>:string]:any;</span><br><span class="line">  <span class="title function_">cb</span>():<span class="keyword">void</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">person</span>:<span class="title class_">Person</span>=&#123;</span><br><span class="line">  <span class="attr">a</span>:<span class="string">&#x27;123&#x27;</span>,</span><br><span class="line">  <span class="attr">c</span>:<span class="string">&#x27;123&#x27;</span>,</span><br><span class="line">  <span class="attr">cb</span>:<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">123</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="4-数组的类型"><a href="#4-数组的类型" class="headerlink" title="4.数组的类型"></a>4.数组的类型</h2><h3 id="4-1类型"><a href="#4-1类型" class="headerlink" title="4.1类型[]"></a>4.1类型[]</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 类型加中括号</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>:number[]=[<span class="number">123</span>]</span><br><span class="line"><span class="comment">// 这样会报错定义了数字类型出现字符串是不允许的</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>:number[]=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="string">&#x27;1&#x27;</span>]</span><br><span class="line"><span class="comment">// 操作方法添加也是不允许的</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>:number[]=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,]</span><br><span class="line">arr.<span class="title function_">unshift</span>(<span class="string">&#x27;1&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> <span class="attr">arr</span>:number[]=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]; <span class="comment">// 数字类型的数组</span></span><br><span class="line"><span class="keyword">var</span> <span class="attr">arr2</span>:string[]=[<span class="string">&quot;1&quot;</span>,<span class="string">&quot;2&quot;</span>];<span class="comment">// 字符串类型的数组</span></span><br><span class="line"><span class="keyword">var</span> <span class="attr">arr3</span>:any[]=[<span class="number">1</span>,<span class="string">&quot;2&quot;</span>,<span class="literal">true</span>];<span class="comment">// 任意类型的数组</span></span><br></pre></td></tr></table></figure>

<h3 id="4-2-数组泛型"><a href="#4-2-数组泛型" class="headerlink" title="4.2 数组泛型"></a>4.2 数组泛型</h3><p><strong>规则Array&lt;类型&gt;</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">arr</span>:<span class="title class_">Array</span>&lt;number&gt; = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]</span><br></pre></td></tr></table></figure>

<h3 id="4-3-用接口表示数组"><a href="#4-3-用接口表示数组" class="headerlink" title="4.3 用接口表示数组"></a>4.3 用接口表示数组</h3><p><strong>一般用来描述类数组</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">interface <span class="title class_">NumberArray</span>&#123;</span><br><span class="line">  [<span class="attr">index</span>:number]:number;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">fibonacci</span>:<span class="title class_">NumberArray</span>=[<span class="number">1</span>,<span class="number">1</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br></pre></td></tr></table></figure>

<h3 id="4-4-多维数组"><a href="#4-4-多维数组" class="headerlink" title="4.4 多维数组"></a>4.4 多维数组</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">data</span>:number[][]=[[<span class="number">1</span>,<span class="number">2</span>],[<span class="number">3</span>,<span class="number">4</span>]]</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="4-5-arguments类数组"><a href="#4-5-arguments类数组" class="headerlink" title="4.5 arguments类数组"></a>4.5 arguments类数组</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Arr</span>(<span class="params">...args:any</span>):<span class="keyword">void</span>&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">arguments</span>)</span><br><span class="line">  <span class="comment">// 错误的arguments 是类数组不能这样定义</span></span><br><span class="line">  <span class="keyword">let</span> <span class="attr">arr</span>:number[]=<span class="variable language_">arguments</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Arr</span>(<span class="number">111</span>,<span class="number">222</span>,<span class="number">333</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Arr</span>(<span class="params">...args:any</span>):<span class="keyword">void</span>&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">arguments</span>)</span><br><span class="line">  <span class="comment">// ts内置对象IArguments 定义</span></span><br><span class="line">  <span class="keyword">let</span> <span class="attr">arr</span>:<span class="title class_">IArguments</span>=<span class="variable language_">arguments</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Arr</span>(<span class="number">111</span>,<span class="number">222</span>,<span class="number">333</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 其中 IArguments 是 TypeScript 中定义好了的类型，他实际上就是：</span></span><br><span class="line">interface <span class="title class_">IArguments</span>&#123;</span><br><span class="line">  [<span class="attr">index</span>:number]:any;</span><br><span class="line">  <span class="attr">length</span>:number;</span><br><span class="line">  <span class="attr">callee</span>:<span class="title class_">Function</span>:</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="4-6-any在数组中的应用"><a href="#4-6-any在数组中的应用" class="headerlink" title="4.6 any在数组中的应用"></a>4.6 any在数组中的应用</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 一个常见的例子数组中可以存在任意类型</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">list</span>:any[]=[<span class="string">&#x27;test&#x27;</span>,<span class="number">1</span>,[],&#123;<span class="attr">a</span>:<span class="number">1</span>&#125;]</span><br></pre></td></tr></table></figure>

<h2 id="5-函数扩展"><a href="#5-函数扩展" class="headerlink" title="5.函数扩展"></a>5.函数扩展</h2><h3 id="5-1函数的类型"><a href="#5-1函数的类型" class="headerlink" title="5.1函数的类型"></a>5.1函数的类型</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 注意，参数不能多传，也不能少传 必须按照约定的类型来</span></span><br><span class="line"><span class="keyword">const</span> fn=(<span class="attr">name</span>:string,<span class="attr">age</span>:number):<span class="function"><span class="params">string</span>=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> name+age</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn</span>(<span class="string">&#x27;张三&#x27;</span>,<span class="number">18</span>)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="5-2-函数的可选参数？"><a href="#5-2-函数的可选参数？" class="headerlink" title="5.2 函数的可选参数？"></a>5.2 函数的可选参数？</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 通过？表示该参数为可选参数</span></span><br><span class="line"><span class="keyword">const</span> fn=(<span class="attr">name</span>:string,age?:number):<span class="function"><span class="params">string</span>=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> name+age</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn</span>(<span class="string">&#x27;张三&#x27;</span>,<span class="number">18</span>)</span><br></pre></td></tr></table></figure>

<h3 id="5-3-函数参数的默认值"><a href="#5-3-函数参数的默认值" class="headerlink" title="5.3 函数参数的默认值"></a>5.3 函数参数的默认值</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fn=(<span class="attr">name</span>:string=<span class="string">&#x27;我是默认值&#x27;</span>):<span class="function"><span class="params">string</span>=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> me</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn</span>()</span><br></pre></td></tr></table></figure>

<h3 id="5-4-接口定义函数"><a href="#5-4-接口定义函数" class="headerlink" title="5.4 接口定义函数"></a>5.4 接口定义函数</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 定义参数num和num2:后边定义返回值的类型</span></span><br><span class="line">interface <span class="title class_">Add</span>&#123;</span><br><span class="line">  (<span class="attr">num</span>:number,<span class="attr">num2</span>:number):number</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> <span class="attr">fn</span>:<span class="title class_">Add</span>(<span class="attr">num</span>:number,<span class="attr">num2</span>:number):<span class="function"><span class="params">number</span>=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> num+num2</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn</span>(<span class="number">5</span>,<span class="number">5</span>)</span><br><span class="line"></span><br><span class="line">interface <span class="title class_">User</span>&#123;</span><br><span class="line">  <span class="attr">name</span>:string;</span><br><span class="line">  <span class="attr">age</span>:number;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getUserInfo</span>(<span class="params">user:User</span>):<span class="title class_">User</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> user</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="5-5-定义剩余参数"><a href="#5-5-定义剩余参数" class="headerlink" title="5.5 定义剩余参数"></a>5.5 定义剩余参数</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> fn=(<span class="attr">array</span>:number[],...<span class="attr">items</span>:any[]):any[]=&gt;&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(array,items)</span><br><span class="line">  <span class="keyword">return</span> items</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">a</span>:number[]=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"><span class="title function_">fn</span>(a,<span class="string">&#x27;4&#x27;</span>,<span class="string">&#x27;5&#x27;</span>,<span class="string">&#x27;6&#x27;</span>)</span><br></pre></td></tr></table></figure>

<h3 id="5-6-函数重载"><a href="#5-6-函数重载" class="headerlink" title="5.6 函数重载"></a>5.6 函数重载</h3><p><strong>重载是方法名字相同，而参数不同，返回类型可以相同也可以不同</strong></p>
<p><strong>如果参数类型不同，则参数类型应设置为any</strong></p>
<p><strong>参数数量不通你可以将不同的参数设置为可选</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">params:number</span>):<span class="keyword">void</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">params:string,params2:number</span>):<span class="keyword">void</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fn</span>(<span class="params">params:any,params2?:any</span>):<span class="keyword">void</span>&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(params)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(params2)</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">fn</span>(<span class="number">123</span>) <span class="comment">// 执行第一个fn规则</span></span><br><span class="line"><span class="title function_">fn</span>(<span class="string">&quot;123&quot;</span>,<span class="number">456</span>) <span class="comment">// 执行第二个fn规则</span></span><br></pre></td></tr></table></figure>

<h2 id="6-类型断言｜联合类型｜交叉类型"><a href="#6-类型断言｜联合类型｜交叉类型" class="headerlink" title="6 类型断言｜联合类型｜交叉类型"></a>6 类型断言｜联合类型｜交叉类型</h2><h3 id="6-1联合类型"><a href="#6-1联合类型" class="headerlink" title="6.1联合类型"></a>6.1联合类型</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//例如我们的手机号通常是13XXXXXXX 为数字类型 这时候产品说需要支持座机</span></span><br><span class="line"><span class="comment">//所以我们就可以使用联合类型支持座机字符串</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">myPhone</span>: number | string  = <span class="string">&#x27;010-820&#x27;</span></span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"><span class="comment">//这样写是会报错的应为我们的联合类型只有数字和字符串并没有布尔值</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">myPhone</span>: number | string  = <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 函数使用联合类型</span></span><br><span class="line"><span class="keyword">const</span> fn = (<span class="attr">something</span>:number | boolean):<span class="function"><span class="params">boolean</span> =&gt;</span> &#123;</span><br><span class="line">     <span class="keyword">return</span> !!something <span class="comment">// 两次取反就可以转换成布尔值</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="6-2-交叉类型"><a href="#6-2-交叉类型" class="headerlink" title="6.2 交叉类型"></a>6.2 交叉类型</h2><p><strong>多种类型的集合，联合对象将具有所联合类型的所有成员</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">interface <span class="title class_">People</span>&#123;</span><br><span class="line">  <span class="attr">age</span>:number,</span><br><span class="line">  <span class="attr">height</span>:number</span><br><span class="line">&#125;</span><br><span class="line">interface <span class="title class_">Man</span>&#123;</span><br><span class="line">  <span class="attr">sex</span>:string</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 通过单个&amp;连接起来，表示同时满足</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">xiaoman</span>=(<span class="params">man:People&amp;Man</span>)=&gt;&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(man.<span class="property">age</span>)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(man.<span class="property">height</span>)</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(man.<span class="property">sex</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">xiaoman</span>(&#123;<span class="attr">age</span>:<span class="number">18</span>,<span class="attr">height</span>:<span class="number">180</span>,<span class="attr">sex</span>:<span class="string">&#x27;male&#x27;</span>&#125;)</span><br></pre></td></tr></table></figure>

<h3 id="6-3-类型断言"><a href="#6-3-类型断言" class="headerlink" title="6.3 类型断言"></a>6.3 类型断言</h3><p><strong>语法：值 as 类型 或 &lt;类型&gt;值 value as string <string> value</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">interface A&#123;</span><br><span class="line">  <span class="attr">run</span>:string</span><br><span class="line">&#125;</span><br><span class="line">interface B&#123;</span><br><span class="line">  <span class="attr">build</span>:string</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> fn=(<span class="attr">type</span>:A|B):string=&#123;</span><br><span class="line">  <span class="keyword">return</span> type.<span class="property">run</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 这样写是有警告的应为B的接口上面是没有定义run这个属性的</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">interface A&#123;</span><br><span class="line">  <span class="attr">run</span>:string</span><br><span class="line">&#125;</span><br><span class="line">interface B&#123;</span><br><span class="line">  <span class="attr">build</span>:string</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> fn=(<span class="attr">type</span>:A|B):<span class="function"><span class="params">string</span>=&gt;</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (type <span class="keyword">as</span> A).<span class="property">run</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 可以使用类型断言来推断传入的是A接口的值</span></span><br></pre></td></tr></table></figure>

<p><strong>需要注意的是，类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误：</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">需要注意的是，类型断言只能够「欺骗」<span class="title class_">TypeScript</span> 编译器，无法避免运行时的错误，反而滥用类型断言可能会导致运行时错误：</span><br></pre></td></tr></table></figure>

<p><strong>类型断言是不具影响力的</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 在下面的例子中，将 something 断言为 boolean 虽然可以通过编译，但是并没有什么用 并不会影响结果, 因为编译过程中会删除类型断言</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">toBoolean</span>(<span class="params">something: any</span>): boolean &#123;</span><br><span class="line">    <span class="keyword">return</span> something <span class="keyword">as</span> boolean;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="title function_">toBoolean</span>(<span class="number">1</span>);</span><br><span class="line"><span class="comment">// 返回值为 1</span></span><br></pre></td></tr></table></figure>

<h3 id="6-4-as-const"><a href="#6-4-as-const" class="headerlink" title="6.4 as const"></a>6.4 as const</h3><p><strong>对字面值的断言，与const直接定义常量是有区别的</strong></p>
<p><strong>如果是普通类型直接const声明是一样的</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> names=<span class="string">&#x27;小满&#x27;</span></span><br><span class="line">names= <span class="string">&#x27;aa&#x27;</span> <span class="comment">// 无法修改</span></span><br><span class="line"><span class="keyword">let</span> names2=<span class="string">&#x27;小满&#x27;</span><span class="keyword">as</span> <span class="keyword">const</span></span><br><span class="line">names2=<span class="string">&#x27;aa&#x27;</span> <span class="comment">//无法修改</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组</span></span><br><span class="line"><span class="keyword">let</span> a1=[<span class="number">10</span>,<span class="number">20</span>]<span class="keyword">as</span> <span class="keyword">const</span>;</span><br><span class="line"><span class="keyword">const</span> a2=[<span class="number">10</span>,<span class="number">20</span>];</span><br><span class="line"></span><br><span class="line">a1.<span class="title function_">unshift</span>(<span class="number">30</span>); <span class="comment">// 错误，此时已经断言字面量为[10,20]，数据无法做任何修改</span></span><br><span class="line">a2.<span class="title function_">unshift</span>(<span class="number">30</span>); <span class="comment">// 通过，没有修改指针</span></span><br></pre></td></tr></table></figure>

<h2 id="7-内置对象"><a href="#7-内置对象" class="headerlink" title="7 内置对象"></a>7 内置对象</h2><h3 id="7-1-Boolean、Number、string、RegExp、Date、Error"><a href="#7-1-Boolean、Number、string、RegExp、Date、Error" class="headerlink" title="7.1 Boolean、Number、string、RegExp、Date、Error"></a>7.1 Boolean、Number、string、RegExp、Date、Error</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">b</span>:<span class="title class_">Boolean</span>=<span class="keyword">new</span> <span class="title class_">Boolean</span>(<span class="number">1</span>)</span><br><span class="line"><span class="keyword">let</span> <span class="attr">n</span>:<span class="title class_">Number</span>=<span class="keyword">new</span> <span class="title class_">Number</span>(<span class="literal">true</span>)</span><br><span class="line"><span class="keyword">let</span> <span class="attr">s</span>:<span class="title class_">String</span>=<span class="keyword">new</span> <span class="title class_">String</span>(<span class="string">&#x27;zs&#x27;</span>)</span><br><span class="line"><span class="keyword">let</span> <span class="attr">d</span>:<span class="title class_">Date</span>=<span class="keyword">new</span> <span class="title class_">Date</span>()</span><br><span class="line"><span class="keyword">let</span> <span class="attr">r</span>:<span class="title class_">RegExp</span>=<span class="regexp">/^1/</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">e</span>:<span class="title class_">Error</span>=<span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;error!&#x27;</span>)</span><br></pre></td></tr></table></figure>

<h3 id="7-2-Dom和Bom的内置对象"><a href="#7-2-Dom和Bom的内置对象" class="headerlink" title="7.2 Dom和Bom的内置对象"></a>7.2 Dom和Bom的内置对象</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Document、HTMLElement、Event、NodeList 等</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">body</span>: <span class="title class_">HTMLElement</span> = <span class="variable language_">document</span>.<span class="property">body</span>;</span><br><span class="line"><span class="keyword">let</span> <span class="attr">allDiv</span>: <span class="title class_">NodeList</span> = <span class="variable language_">document</span>.<span class="title function_">querySelectorAll</span>(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line"><span class="comment">//读取div 这种需要类型断言 或者加个判断应为读不到返回null</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">div</span>:<span class="title class_">HTMLElement</span> = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&#x27;div&#x27;</span>) <span class="keyword">as</span> <span class="title class_">HTMLDivElement</span></span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">addEventListener</span>(<span class="string">&#x27;click&#x27;</span>, <span class="keyword">function</span> (<span class="params">e: MouseEvent</span>) &#123;</span><br><span class="line">    </span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//dom元素的映射表</span></span><br><span class="line">interface <span class="title class_">HTMLElementTagNameMap</span> &#123;</span><br><span class="line">    <span class="string">&quot;a&quot;</span>: <span class="title class_">HTMLAnchorElement</span>;</span><br><span class="line">    <span class="string">&quot;abbr&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;address&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;applet&quot;</span>: <span class="title class_">HTMLAppletElement</span>;</span><br><span class="line">    <span class="string">&quot;area&quot;</span>: <span class="title class_">HTMLAreaElement</span>;</span><br><span class="line">    <span class="string">&quot;article&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;aside&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;audio&quot;</span>: <span class="title class_">HTMLAudioElement</span>;</span><br><span class="line">    <span class="string">&quot;b&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;base&quot;</span>: <span class="title class_">HTMLBaseElement</span>;</span><br><span class="line">    <span class="string">&quot;bdi&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;bdo&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;blockquote&quot;</span>: <span class="title class_">HTMLQuoteElement</span>;</span><br><span class="line">    <span class="string">&quot;body&quot;</span>: <span class="title class_">HTMLBodyElement</span>;</span><br><span class="line">    <span class="string">&quot;br&quot;</span>: <span class="title class_">HTMLBRElement</span>;</span><br><span class="line">    <span class="string">&quot;button&quot;</span>: <span class="title class_">HTMLButtonElement</span>;</span><br><span class="line">    <span class="string">&quot;canvas&quot;</span>: <span class="title class_">HTMLCanvasElement</span>;</span><br><span class="line">    <span class="string">&quot;caption&quot;</span>: <span class="title class_">HTMLTableCaptionElement</span>;</span><br><span class="line">    <span class="string">&quot;cite&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;code&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;col&quot;</span>: <span class="title class_">HTMLTableColElement</span>;</span><br><span class="line">    <span class="string">&quot;colgroup&quot;</span>: <span class="title class_">HTMLTableColElement</span>;</span><br><span class="line">    <span class="string">&quot;data&quot;</span>: <span class="title class_">HTMLDataElement</span>;</span><br><span class="line">    <span class="string">&quot;datalist&quot;</span>: <span class="title class_">HTMLDataListElement</span>;</span><br><span class="line">    <span class="string">&quot;dd&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;del&quot;</span>: <span class="title class_">HTMLModElement</span>;</span><br><span class="line">    <span class="string">&quot;details&quot;</span>: <span class="title class_">HTMLDetailsElement</span>;</span><br><span class="line">    <span class="string">&quot;dfn&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;dialog&quot;</span>: <span class="title class_">HTMLDialogElement</span>;</span><br><span class="line">    <span class="string">&quot;dir&quot;</span>: <span class="title class_">HTMLDirectoryElement</span>;</span><br><span class="line">    <span class="string">&quot;div&quot;</span>: <span class="title class_">HTMLDivElement</span>;</span><br><span class="line">    <span class="string">&quot;dl&quot;</span>: <span class="title class_">HTMLDListElement</span>;</span><br><span class="line">    <span class="string">&quot;dt&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;em&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;embed&quot;</span>: <span class="title class_">HTMLEmbedElement</span>;</span><br><span class="line">    <span class="string">&quot;fieldset&quot;</span>: <span class="title class_">HTMLFieldSetElement</span>;</span><br><span class="line">    <span class="string">&quot;figcaption&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;figure&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;font&quot;</span>: <span class="title class_">HTMLFontElement</span>;</span><br><span class="line">    <span class="string">&quot;footer&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;form&quot;</span>: <span class="title class_">HTMLFormElement</span>;</span><br><span class="line">    <span class="string">&quot;frame&quot;</span>: <span class="title class_">HTMLFrameElement</span>;</span><br><span class="line">    <span class="string">&quot;frameset&quot;</span>: <span class="title class_">HTMLFrameSetElement</span>;</span><br><span class="line">    <span class="string">&quot;h1&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h2&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h3&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h4&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h5&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;h6&quot;</span>: <span class="title class_">HTMLHeadingElement</span>;</span><br><span class="line">    <span class="string">&quot;head&quot;</span>: <span class="title class_">HTMLHeadElement</span>;</span><br><span class="line">    <span class="string">&quot;header&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;hgroup&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;hr&quot;</span>: <span class="title class_">HTMLHRElement</span>;</span><br><span class="line">    <span class="string">&quot;html&quot;</span>: <span class="title class_">HTMLHtmlElement</span>;</span><br><span class="line">    <span class="string">&quot;i&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;iframe&quot;</span>: <span class="title class_">HTMLIFrameElement</span>;</span><br><span class="line">    <span class="string">&quot;img&quot;</span>: <span class="title class_">HTMLImageElement</span>;</span><br><span class="line">    <span class="string">&quot;input&quot;</span>: <span class="title class_">HTMLInputElement</span>;</span><br><span class="line">    <span class="string">&quot;ins&quot;</span>: <span class="title class_">HTMLModElement</span>;</span><br><span class="line">    <span class="string">&quot;kbd&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;label&quot;</span>: <span class="title class_">HTMLLabelElement</span>;</span><br><span class="line">    <span class="string">&quot;legend&quot;</span>: <span class="title class_">HTMLLegendElement</span>;</span><br><span class="line">    <span class="string">&quot;li&quot;</span>: <span class="title class_">HTMLLIElement</span>;</span><br><span class="line">    <span class="string">&quot;link&quot;</span>: <span class="title class_">HTMLLinkElement</span>;</span><br><span class="line">    <span class="string">&quot;main&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;map&quot;</span>: <span class="title class_">HTMLMapElement</span>;</span><br><span class="line">    <span class="string">&quot;mark&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;marquee&quot;</span>: <span class="title class_">HTMLMarqueeElement</span>;</span><br><span class="line">    <span class="string">&quot;menu&quot;</span>: <span class="title class_">HTMLMenuElement</span>;</span><br><span class="line">    <span class="string">&quot;meta&quot;</span>: <span class="title class_">HTMLMetaElement</span>;</span><br><span class="line">    <span class="string">&quot;meter&quot;</span>: <span class="title class_">HTMLMeterElement</span>;</span><br><span class="line">    <span class="string">&quot;nav&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;noscript&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;object&quot;</span>: <span class="title class_">HTMLObjectElement</span>;</span><br><span class="line">    <span class="string">&quot;ol&quot;</span>: <span class="title class_">HTMLOListElement</span>;</span><br><span class="line">    <span class="string">&quot;optgroup&quot;</span>: <span class="title class_">HTMLOptGroupElement</span>;</span><br><span class="line">    <span class="string">&quot;option&quot;</span>: <span class="title class_">HTMLOptionElement</span>;</span><br><span class="line">    <span class="string">&quot;output&quot;</span>: <span class="title class_">HTMLOutputElement</span>;</span><br><span class="line">    <span class="string">&quot;p&quot;</span>: <span class="title class_">HTMLParagraphElement</span>;</span><br><span class="line">    <span class="string">&quot;param&quot;</span>: <span class="title class_">HTMLParamElement</span>;</span><br><span class="line">    <span class="string">&quot;picture&quot;</span>: <span class="title class_">HTMLPictureElement</span>;</span><br><span class="line">    <span class="string">&quot;pre&quot;</span>: <span class="title class_">HTMLPreElement</span>;</span><br><span class="line">    <span class="string">&quot;progress&quot;</span>: <span class="title class_">HTMLProgressElement</span>;</span><br><span class="line">    <span class="string">&quot;q&quot;</span>: <span class="title class_">HTMLQuoteElement</span>;</span><br><span class="line">    <span class="string">&quot;rp&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;rt&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;ruby&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;s&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;samp&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;script&quot;</span>: <span class="title class_">HTMLScriptElement</span>;</span><br><span class="line">    <span class="string">&quot;section&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;select&quot;</span>: <span class="title class_">HTMLSelectElement</span>;</span><br><span class="line">    <span class="string">&quot;slot&quot;</span>: <span class="title class_">HTMLSlotElement</span>;</span><br><span class="line">    <span class="string">&quot;small&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;source&quot;</span>: <span class="title class_">HTMLSourceElement</span>;</span><br><span class="line">    <span class="string">&quot;span&quot;</span>: <span class="title class_">HTMLSpanElement</span>;</span><br><span class="line">    <span class="string">&quot;strong&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;style&quot;</span>: <span class="title class_">HTMLStyleElement</span>;</span><br><span class="line">    <span class="string">&quot;sub&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;summary&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;sup&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;table&quot;</span>: <span class="title class_">HTMLTableElement</span>;</span><br><span class="line">    <span class="string">&quot;tbody&quot;</span>: <span class="title class_">HTMLTableSectionElement</span>;</span><br><span class="line">    <span class="string">&quot;td&quot;</span>: <span class="title class_">HTMLTableDataCellElement</span>;</span><br><span class="line">    <span class="string">&quot;template&quot;</span>: <span class="title class_">HTMLTemplateElement</span>;</span><br><span class="line">    <span class="string">&quot;textarea&quot;</span>: <span class="title class_">HTMLTextAreaElement</span>;</span><br><span class="line">    <span class="string">&quot;tfoot&quot;</span>: <span class="title class_">HTMLTableSectionElement</span>;</span><br><span class="line">    <span class="string">&quot;th&quot;</span>: <span class="title class_">HTMLTableHeaderCellElement</span>;</span><br><span class="line">    <span class="string">&quot;thead&quot;</span>: <span class="title class_">HTMLTableSectionElement</span>;</span><br><span class="line">    <span class="string">&quot;time&quot;</span>: <span class="title class_">HTMLTimeElement</span>;</span><br><span class="line">    <span class="string">&quot;title&quot;</span>: <span class="title class_">HTMLTitleElement</span>;</span><br><span class="line">    <span class="string">&quot;tr&quot;</span>: <span class="title class_">HTMLTableRowElement</span>;</span><br><span class="line">    <span class="string">&quot;track&quot;</span>: <span class="title class_">HTMLTrackElement</span>;</span><br><span class="line">    <span class="string">&quot;u&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;ul&quot;</span>: <span class="title class_">HTMLUListElement</span>;</span><br><span class="line">    <span class="string">&quot;var&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">    <span class="string">&quot;video&quot;</span>: <span class="title class_">HTMLVideoElement</span>;</span><br><span class="line">    <span class="string">&quot;wbr&quot;</span>: <span class="title class_">HTMLElement</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="7-3-定义Promise"><a href="#7-3-定义Promise" class="headerlink" title="7.3 定义Promise"></a>7.3 定义Promise</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 如果我们不指定返回的类型TS是推断不出来返回的是什么类型</span></span><br><span class="line"><span class="comment">//  函数定义返回promise 语法规则:Promise&lt;T&gt; 类型 </span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">promise</span>(<span class="params"></span>):<span class="title class_">Promise</span>&lt;number&gt;&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>&lt;number&gt;(<span class="function">(<span class="params">resolve, reject</span>)=&gt;</span>&#123;</span><br><span class="line">		<span class="title function_">resolve</span>(<span class="number">1</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="8-Class类"><a href="#8-Class类" class="headerlink" title="8 Class类"></a>8 Class类</h2><h3 id="8-1-定义类"><a href="#8-1-定义类" class="headerlink" title="8.1 定义类"></a>8.1 定义类</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span>&#123;</span><br><span class="line">  <span class="comment">// 在TypeScript是不允许直接在constructor定义变量的 需要在constructor上面先声明</span></span><br><span class="line">  <span class="comment">// 这样引发了第二个问题你如果定义了变量不用 也会报错 通常是给个默认值 或者进行赋值</span></span><br><span class="line">  <span class="attr">name</span>:string</span><br><span class="line">  <span class="attr">age</span>:number=<span class="number">0</span></span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">name:string,age:number</span>)&#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span>=name</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="8-2类的修饰符"><a href="#8-2类的修饰符" class="headerlink" title="8.2类的修饰符"></a>8.2类的修饰符</h3><p><strong>public private protected</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span>&#123;</span><br><span class="line">  public <span class="attr">name</span>:string</span><br><span class="line">  private <span class="attr">age</span>:number</span><br><span class="line">  protected <span class="attr">some</span>:any</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">name:string,ages:number,some:any</span>)&#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span>=name</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">age</span>=ages</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">some</span>=some</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">run</span>(<span class="params"></span>)&#123;</span><br><span class="line">    </span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 使用public 修饰符 可以让你定义的变量 内部访问 也可以外部访问 如果不写默认就是public</span></span><br><span class="line"><span class="keyword">let</span> aa=<span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&#x27;zs&#x27;</span>，<span class="number">18</span>)</span><br><span class="line">aa.<span class="property">name</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用private 修饰符 代表定义的变量私有的只能在内部访问 不能在外部访问</span></span><br><span class="line">aa.<span class="property">age</span> <span class="comment">//报错</span></span><br><span class="line"><span class="comment">// 使用 protexted 修饰符 代表定义的变量私有的只能在内部和继承的子类中访问 不能在外部访问</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span>&#123;</span><br><span class="line">  public <span class="attr">name</span>:string</span><br><span class="line">  private <span class="attr">age</span>:number</span><br><span class="line">  protected <span class="attr">some</span>:any</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">name:string,ages:number,some:any</span>)&#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span>=name</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">age</span>=ages</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">some</span>=some</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">run</span>(<span class="params"></span>)&#123;</span><br><span class="line">    </span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Man</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Person</span>&#123;</span><br><span class="line">  <span class="title function_">constuctor</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">super</span>(<span class="string">&#x27;张三&#x27;</span>,<span class="number">18</span>,<span class="number">1</span>)</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">some</span>)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">create</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">some</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> xiaoman=<span class="keyword">new</span> <span class="title class_">Person</span>(<span class="string">&#x27;小满&#x27;</span>,<span class="number">18</span>,<span class="number">1</span>)</span><br><span class="line"><span class="keyword">let</span> man =<span class="keyword">new</span> <span class="title class_">Man</span>()</span><br><span class="line">man.<span class="property">some</span></span><br></pre></td></tr></table></figure>

<h3 id="8-3-static静态属性和静态方法"><a href="#8-3-static静态属性和静态方法" class="headerlink" title="8.3 static静态属性和静态方法"></a>8.3 static静态属性和静态方法</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 用static 定义的属性 不可以通过this去访问 只能通过类名去调用</span></span><br><span class="line"><span class="comment">// static 静态函数 同样也是不能通过this 去调用 也是通过类名去调用</span></span><br><span class="line"><span class="comment">// 需注意：如果两个函数都是static 静态的是可以通过this互相调用</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span>&#123;</span><br><span class="line">  <span class="keyword">static</span> <span class="attr">name</span>:string=<span class="string">&#x27;zs&#x27;</span></span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params">name:string</span>)&#123;</span><br><span class="line">    <span class="comment">// this.name=name  //不可以通过this读取name,只能容果类名去调用</span></span><br><span class="line">    <span class="comment">// this.run() //不可以通过this读取name，只能通过类名去调用</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">static</span> <span class="title function_">run</span>(<span class="params"></span>)&#123;&#125;</span><br><span class="line">  <span class="keyword">static</span> <span class="title function_">get</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">run</span>()  <span class="comment">//同为static函数，可以调用</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Person</span>.<span class="property">name</span>  <span class="comment">// 能通过类名去调用</span></span><br><span class="line"><span class="title class_">Person</span>.<span class="title function_">run</span>() <span class="comment">// 能通过类名去调用</span></span><br></pre></td></tr></table></figure>

<h3 id="8-4-interface-定义类"><a href="#8-4-interface-定义类" class="headerlink" title="8.4 interface 定义类"></a>8.4 interface 定义类</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// ts interface 定义类 使用关键字 implements   后面跟interface的名字多个用逗号隔开 继承还是用extends</span></span><br><span class="line"> </span><br><span class="line">interface <span class="title class_">PersonClass</span> &#123;</span><br><span class="line">    <span class="title function_">get</span>(<span class="attr">type</span>:boolean): boolean</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">interface <span class="title class_">PersonClass2</span> &#123;</span><br><span class="line">	<span class="title function_">set</span>(): <span class="keyword">void</span>,</span><br><span class="line">    <span class="attr">asd</span>: string</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">A</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: string</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = <span class="string">&#x27;123&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Person</span> <span class="keyword">extends</span> <span class="title class_ inherited__">A</span> implements <span class="title class_">PersonClass</span>, <span class="title class_">PersonClass2</span> &#123;</span><br><span class="line">    <span class="attr">asd</span>: string</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">super</span>()</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">asd</span> = <span class="string">&#x27;aaa&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">get</span>(<span class="params">type:boolean</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> type</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">set</span>(<span class="params"></span>)&#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="8-5-抽象类"><a href="#8-5-抽象类" class="headerlink" title="8.5 抽象类"></a>8.5 抽象类</h3><p>应用场景如果你写的类实例化之后毫无用处此时我可以把他定义为抽象类</p>
<p>或者你也可以把他作为一个基类-&gt; 通过继承一个派生类去实现基类的一些方法</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">abstract <span class="keyword">class</span> <span class="title class_">A</span> &#123;</span><br><span class="line">	public <span class="attr">name</span>:string</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">abstract <span class="keyword">class</span> <span class="title class_">A</span> &#123;</span><br><span class="line">    <span class="attr">name</span>: string</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">name:string</span>)&#123;</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">name</span> = name</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">print</span>():string &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">name</span></span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    abstract <span class="title function_">getName</span>():string</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">B</span> <span class="keyword">extends</span> <span class="title class_ inherited__">A</span> &#123;</span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params"></span>)&#123;</span><br><span class="line">        <span class="variable language_">super</span>(<span class="string">&#x27;zs&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title function_">getName</span>():string &#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="variable language_">this</span>.<span class="property">name</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> b = <span class="keyword">new</span> <span class="title function_">B</span>()</span><br></pre></td></tr></table></figure>

<h2 id="9-枚举类型"><a href="#9-枚举类型" class="headerlink" title="9 枚举类型"></a>9 枚举类型</h2><h3 id="9-1数字枚举"><a href="#9-1数字枚举" class="headerlink" title="9.1数字枚举"></a>9.1数字枚举</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 例如 红绿蓝 Red = 0 Green = 1 Blue= 2 分别代表红色0 绿色为1 蓝色为2</span></span><br><span class="line">enum <span class="title class_">Types</span> &#123;</span><br><span class="line">    <span class="title class_">Red</span>,</span><br><span class="line">    <span class="title class_">Green</span>,</span><br><span class="line">    <span class="title class_">Blue</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 这样写就可以实现应为ts定义的枚举中的每一个组员默认都是从0开始的所以也就是</span></span><br><span class="line">enum <span class="title class_">Types</span>&#123;</span><br><span class="line">   <span class="title class_">Red</span> = <span class="number">0</span>,</span><br><span class="line">   <span class="title class_">Green</span> = <span class="number">1</span>,</span><br><span class="line">   <span class="title class_">BLue</span> = <span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//默认就是从0开始的 可以不写值</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 增长枚举</span></span><br><span class="line">enum <span class="title class_">Types</span>&#123;</span><br><span class="line">   <span class="title class_">Red</span> = <span class="number">1</span>,</span><br><span class="line">   <span class="title class_">Green</span>,</span><br><span class="line">   <span class="title class_">BLue</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 如上，我们定义了一个数字枚举， Red使用初始化为 1。 其余的成员会从 1开始自动增长。 换句话说， Type.Red的值为 1， Green为 2， Blue为 3。</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="9-2-字符串枚举"><a href="#9-2-字符串枚举" class="headerlink" title="9.2 字符串枚举"></a>9.2 字符串枚举</h3><p><strong>字符串枚举的概念很简单。 在一个字符串枚举里，每个成员都必须用字符串字面量，或另外一个字符串枚举成员进行初始化。</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">enum <span class="title class_">Types</span>&#123;</span><br><span class="line">   <span class="title class_">Red</span> = <span class="string">&#x27;red&#x27;</span>,</span><br><span class="line">   <span class="title class_">Green</span> = <span class="string">&#x27;green&#x27;</span>,</span><br><span class="line">   <span class="title class_">BLue</span> = <span class="string">&#x27;blue&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 由于字符串枚举没有自增长的行为，字符串枚举可以很好的序列化。 换句话说，如果你正在调试并且必须要读一个数字枚举的运行时的值，这个值通常是很难读的 - 它并不能表达有用的信息，字符串枚举允许你提供一个运行时有意义的并且可读的值，独立于枚举成员的名字。</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="9-3-异构枚举"><a href="#9-3-异构枚举" class="headerlink" title="9.3 异构枚举"></a>9.3 异构枚举</h3><p><strong>枚举可以混合字符串和数字成员</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">enum <span class="title class_">Types</span>&#123;</span><br><span class="line">   <span class="title class_">No</span> = <span class="string">&quot;No&quot;</span>,</span><br><span class="line">   <span class="title class_">Yes</span> = <span class="number">1</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="9-4-接口枚举"><a href="#9-4-接口枚举" class="headerlink" title="9.4 接口枚举"></a>9.4 接口枚举</h3><p><strong>定义一个枚举Types 定义一个接口A 他有一个属性red 值为Types.yyds声明对象的时候要遵循这个规则</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">enum <span class="title class_">Types</span> &#123;</span><br><span class="line">  yyds,</span><br><span class="line">  dddd</span><br><span class="line">&#125;</span><br><span class="line">interface A &#123;</span><br><span class="line">  <span class="attr">red</span>:<span class="title class_">Types</span>.<span class="property">yyds</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="attr">obj</span>:A = &#123;</span><br><span class="line">  <span class="attr">red</span>:<span class="title class_">Types</span>.<span class="property">yyds</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="9-5-const枚举"><a href="#9-5-const枚举" class="headerlink" title="9.5 const枚举"></a>9.5 const枚举</h3><p><strong>let 和 var 都是不允许的声明只能使用const</strong></p>
<p><strong>大多数情况下，枚举是十分有效的方案。 然而在某些情况下需求很严格。 为了避免在额外生成的代码上的开销和额外的非直接的对枚举成员的访问，我们可以使用 const枚举。 常量枚举通过在枚举上使用 const修饰符来定义</strong></p>
<p><strong>const 声明的枚举会被编译成常量</strong></p>
<p><strong>普通声明的枚举编译完后是个对象</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> enum <span class="title class_">Types</span>&#123;</span><br><span class="line">   <span class="title class_">No</span> = <span class="string">&quot;No&quot;</span>,</span><br><span class="line">   <span class="title class_">Yes</span> = <span class="number">1</span>,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="9-6-反向映射"><a href="#9-6-反向映射" class="headerlink" title="9.6 反向映射"></a>9.6 反向映射</h3><p><strong>它包含了正向映射（ name -&gt; value）和反向映射（ value -&gt; name）</strong><br><strong>要注意的是 不会为字符串枚举成员生成反向映射。</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">enum <span class="title class_">Enum</span> &#123;</span><br><span class="line">   fall</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> a = <span class="title class_">Enum</span>.<span class="property">fall</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(a); <span class="comment">//0</span></span><br><span class="line"><span class="keyword">let</span> nameOfA = <span class="title class_">Enum</span>[a]; </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(nameOfA); <span class="comment">//fall</span></span><br></pre></td></tr></table></figure>

<h2 id="10-类型推断｜类型别名"><a href="#10-类型推断｜类型别名" class="headerlink" title="10 类型推断｜类型别名"></a>10 类型推断｜类型别名</h2><h3 id="10-1-类型推断"><a href="#10-1-类型推断" class="headerlink" title="10.1 类型推断"></a>10.1 类型推断</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> str = <span class="string">&quot;小满zs&quot;</span></span><br><span class="line"><span class="comment">// 声明了一个变量但是没有定义类型, TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论, 所以TS帮我推断出来这是一个string类型, 如果你声明变量没有定义类型也没有赋值这时候TS会推断成any类型可以进行任何操作</span></span><br></pre></td></tr></table></figure>

<h3 id="10-2-类型别名"><a href="#10-2-类型别名" class="headerlink" title="10.2 类型别名"></a>10.2 类型别名</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// type 关键字（可以给一个类型定义一个名字）多用于符合类型</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//  定义类型别名</span></span><br><span class="line">type str = string</span><br><span class="line"><span class="keyword">let</span> <span class="attr">s</span>:str = <span class="string">&quot;我是小满&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(s);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义函数别名</span></span><br><span class="line">type str = <span class="function">() =&gt;</span> string</span><br><span class="line"><span class="keyword">let</span> <span class="attr">s</span>: str = <span class="function">() =&gt;</span> <span class="string">&quot;我是小满&quot;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(s);</span><br><span class="line"></span><br><span class="line"><span class="comment">//  定义联合类型别名</span></span><br><span class="line">type str = string | number</span><br><span class="line"><span class="keyword">let</span> <span class="attr">s</span>: str = <span class="number">123</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">s2</span>: str = <span class="string">&#x27;123&#x27;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(s,s2);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 定义值的别名</span></span><br><span class="line">type value = boolean | <span class="number">0</span> | <span class="string">&#x27;213&#x27;</span></span><br><span class="line"><span class="keyword">let</span> <span class="attr">s</span>:value = <span class="literal">true</span></span><br><span class="line"><span class="comment">//变量s的值  只能是上面value定义的值</span></span><br></pre></td></tr></table></figure>

<h2 id="11-never类型"><a href="#11-never类型" class="headerlink" title="11 never类型"></a>11 never类型</h2><p><strong>TypeScript将使用 never 类型来表示不应该存在的状态(很抽象是不是)</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 返回never的函数必须存在无法达到的终点</span></span><br><span class="line"> </span><br><span class="line"><span class="comment">// 因为必定抛出异常，所以 error 将不会有返回值</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">error</span>(<span class="params">message: string</span>): never &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(message);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 因为存在死循环，所以 loop 将不会有返回值</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">loop</span>(<span class="params"></span>): never &#123;</span><br><span class="line">    <span class="keyword">while</span> (<span class="literal">true</span>) &#123;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="never-和-void-的差异"><a href="#never-和-void-的差异" class="headerlink" title="never 和 void 的差异"></a><strong>never 和 void 的差异</strong></h5><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">//void类型只是没有返回值 但本身不会出错</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Void</span>(<span class="params"></span>):<span class="keyword">void</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>();</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//只会抛出异常没有返回值</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Never</span>(<span class="params"></span>):never &#123;</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;aaa&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>never类型的应用场景</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">interface A &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;foo&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">interface B &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;bar&quot;</span></span><br><span class="line">&#125;</span><br><span class="line">type <span class="title class_">All</span> = A | B ;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">handleValue</span>(<span class="params">val: All</span>) &#123;</span><br><span class="line">    <span class="keyword">switch</span> (val.<span class="property">type</span>) &#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&#x27;foo&#x27;</span>:</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&#x27;bar&#x27;</span>:</span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            <span class="comment">//兜底逻辑 一般是不会进入这儿如果进来了就是程序异常了</span></span><br><span class="line">            </span><br><span class="line">            <span class="keyword">const</span> <span class="attr">exhaustiveCheck</span>:never = val;</span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>⚠: 比如新来了一个同事他新增了一个C接口，我们必须手动找到所有 switch 代码并处理，否则将有可能引入 BUG 。</strong></p>
<p><strong>而且这将是一个“隐蔽型”的BUG，如果回归面不够广，很难发现此类BUG。</strong></p>
<p><strong>那 TS 有没有办法帮助我们在类型检查阶段发现这个问题呢？</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">interface A &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;foo&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">interface B &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;bar&quot;</span></span><br><span class="line">&#125;</span><br><span class="line">interface C &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;bizz&quot;</span></span><br><span class="line">&#125;</span><br><span class="line">type <span class="title class_">All</span> = A | B | C;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">handleValue</span>(<span class="params">val: All</span>) &#123;</span><br><span class="line">    <span class="keyword">switch</span> (val.<span class="property">type</span>) &#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&#x27;foo&#x27;</span>:</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&#x27;bar&#x27;</span>:</span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            <span class="comment">//兜底逻辑 一般是不会进入这儿如果进来了就是程序异常了</span></span><br><span class="line"> 			<span class="comment">// 此时会报错,因为定义了C的可能性但是case没有添加</span></span><br><span class="line">            <span class="keyword">const</span> <span class="attr">exhaustiveCheck</span>: never = val;  </span><br><span class="line">            <span class="keyword">break</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 由于任何类型都不能赋值给 never 类型的变量，所以当存在进入 default 分支的可能性时，TS的类型检查会及时帮我们发现这个问题</span></span><br></pre></td></tr></table></figure>

<h2 id="12-Symbol类型"><a href="#12-Symbol类型" class="headerlink" title="12 Symbol类型"></a>12 Symbol类型</h2><p><strong>自ECMAScript 2015起，symbol成为了一种新的原生类型，就像number和string一样</strong></p>
<p><strong>symbol类型的值是通过Symbol构造函数创建的。</strong></p>
<p><strong>可以传递参做为唯一标识 只支持 string 和 number类型的参数</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> sym1 = <span class="title class_">Symbol</span>();</span><br><span class="line"><span class="keyword">let</span> sym2 = <span class="title class_">Symbol</span>(<span class="string">&quot;key&quot;</span>); <span class="comment">// 可选的字符串key</span></span><br></pre></td></tr></table></figure>

<p><strong>Symbol的值是唯一的</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> s1 = <span class="title class_">Symbol</span>()</span><br><span class="line"><span class="keyword">const</span> s2 = <span class="title class_">Symbol</span>()</span><br><span class="line"><span class="comment">// s1 === s2 =&gt;false</span></span><br></pre></td></tr></table></figure>

<p><strong>用作对象属性的键</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">	<span class="keyword">let</span> sym = <span class="title class_">Symbol</span>();</span><br><span class="line"> </span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">    [sym]: <span class="string">&quot;value&quot;</span></span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(obj[sym]); <span class="comment">// &quot;value&quot;</span></span><br></pre></td></tr></table></figure>

<p><strong>使用symbol定义的属性,是不能通过如下方式遍历的</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> symbol1 = <span class="title class_">Symbol</span>(<span class="string">&#x27;666&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> symbol2 = <span class="title class_">Symbol</span>(<span class="string">&#x27;777&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> obj1= &#123;</span><br><span class="line">   [symbol1]: <span class="string">&#x27;小满&#x27;</span>,</span><br><span class="line">   [symbol2]: <span class="string">&#x27;二蛋&#x27;</span>,</span><br><span class="line">   <span class="attr">age</span>: <span class="number">19</span>,</span><br><span class="line">   <span class="attr">sex</span>: <span class="string">&#x27;女&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 1 for in 遍历</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">const</span> key <span class="keyword">in</span> obj1) &#123;</span><br><span class="line">   <span class="comment">// 注意在console看key,是不是没有遍历到symbol1</span></span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(key)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 2 Object.keys 遍历</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">keys</span>(obj1)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">keys</span>(obj1))</span><br><span class="line"><span class="comment">// 3 getOwnPropertyNames</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">getOwnPropertyNames</span>(obj1))</span><br><span class="line"><span class="comment">// 4 JSON.stringfy</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">JSON</span>.<span class="title function_">stringify</span>(obj1))</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如何拿到</span></span><br><span class="line"><span class="comment">// 1 拿到具体的symbol 属性,对象中有几个就会拿到几个</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">getOwnPropertySymbols</span>(obj1)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Object</span>.<span class="title function_">getOwnPropertySymbols</span>(obj1))</span><br><span class="line"><span class="comment">// 2 es6 的 Reflect 拿到对象的所有属性</span></span><br><span class="line"><span class="title class_">Reflect</span>.<span class="title function_">ownKeys</span>(obj1)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Reflect</span>.<span class="title function_">ownKeys</span>(obj1))</span><br></pre></td></tr></table></figure>

<h6 id="Symbol-iterator迭代器和生成器for-of"><a href="#Symbol-iterator迭代器和生成器for-of" class="headerlink" title="Symbol.iterator迭代器和生成器for of"></a>Symbol.iterator迭代器和生成器for of</h6><h6 id="支持遍历大部分类型迭代器-arr-nodeList-argumetns-set-map-等"><a href="#支持遍历大部分类型迭代器-arr-nodeList-argumetns-set-map-等" class="headerlink" title="支持遍历大部分类型迭代器 arr nodeList argumetns set map 等"></a>支持遍历大部分类型迭代器 arr nodeList argumetns set map 等</h6><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>];</span><br><span class="line"><span class="keyword">let</span> iterator = arr[<span class="title class_">Symbol</span>.<span class="property">iterator</span>]();</span><br><span class="line"> </span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>());  <span class="comment">//&#123; value: 1, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>());  <span class="comment">//&#123; value: 2, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>());  <span class="comment">//&#123; value: 3, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>());  <span class="comment">//&#123; value: 4, done: false &#125;</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(iterator.<span class="title function_">next</span>());  <span class="comment">//&#123; value: undefined, done: true &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 测试用例</span></span><br><span class="line">interface <span class="title class_">Item</span> &#123;</span><br><span class="line">    <span class="attr">age</span>: number,</span><br><span class="line">    <span class="attr">name</span>: string</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> <span class="attr">array</span>: <span class="title class_">Array</span>&lt;<span class="title class_">Item</span>&gt; = [&#123; <span class="attr">age</span>: <span class="number">123</span>, <span class="attr">name</span>: <span class="string">&quot;1&quot;</span> &#125;, &#123; <span class="attr">age</span>: <span class="number">123</span>, <span class="attr">name</span>: <span class="string">&quot;2&quot;</span> &#125;, &#123; <span class="attr">age</span>: <span class="number">123</span>, <span class="attr">name</span>: <span class="string">&quot;3&quot;</span> &#125;]</span><br><span class="line"> </span><br><span class="line">type mapTypes = string | number</span><br><span class="line"><span class="keyword">const</span> <span class="attr">map</span>:<span class="title class_">Map</span>&lt;mapTypes,mapTypes&gt; = <span class="keyword">new</span> <span class="title class_">Map</span>()</span><br><span class="line"> </span><br><span class="line">map.<span class="title function_">set</span>(<span class="string">&#x27;1&#x27;</span>,<span class="string">&#x27;王爷&#x27;</span>)</span><br><span class="line">map.<span class="title function_">set</span>(<span class="string">&#x27;2&#x27;</span>,<span class="string">&#x27;陆北&#x27;</span>)</span><br><span class="line"> </span><br><span class="line"><span class="keyword">const</span> obj = &#123;</span><br><span class="line">    <span class="attr">aaa</span>:<span class="number">123</span>,</span><br><span class="line">    <span class="attr">bbb</span>:<span class="number">456</span></span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">let</span> <span class="attr">set</span>:<span class="title class_">Set</span>&lt;number&gt; = <span class="keyword">new</span> <span class="title class_">Set</span>([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>])</span><br><span class="line"><span class="comment">// let it:Iterator&lt;Item&gt; = array[Symbol.iterator]()</span></span><br><span class="line"><span class="keyword">const</span> gen = (<span class="attr">erg</span>:any): <span class="function"><span class="params">void</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> <span class="attr">it</span>: <span class="title class_">Iterator</span>&lt;any&gt; = erg[<span class="title class_">Symbol</span>.<span class="property">iterator</span>]()</span><br><span class="line">    <span class="keyword">let</span> <span class="attr">next</span>:any= &#123; <span class="attr">done</span>: <span class="literal">false</span> &#125;</span><br><span class="line">    <span class="keyword">while</span> (!next.<span class="property">done</span>) &#123;</span><br><span class="line">        next =  it.<span class="title function_">next</span>()</span><br><span class="line">        <span class="keyword">if</span> (!next.<span class="property">done</span>) &#123;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(next.<span class="property">value</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">gen</span>(array)</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">以下为这些symbols的列表：</span><br><span class="line"></span><br><span class="line"><span class="title class_">Symbol</span>.<span class="property">hasInstance</span></span><br><span class="line">方法，会被<span class="keyword">instanceof</span>运算符调用。构造器对象用来识别一个对象是否是其实例。</span><br><span class="line"></span><br><span class="line"><span class="title class_">Symbol</span>.<span class="property">isConcatSpreadable</span></span><br><span class="line">布尔值，表示当在一个对象上调用<span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">concat</span>时，这个对象的数组元素是否可展开。</span><br><span class="line"></span><br><span class="line"><span class="title class_">Symbol</span>.<span class="property">iterator</span></span><br><span class="line">方法，被<span class="keyword">for</span>-<span class="keyword">of</span>语句调用。返回对象的默认迭代器。</span><br><span class="line"></span><br><span class="line"><span class="title class_">Symbol</span>.<span class="property">match</span></span><br><span class="line">方法，被<span class="title class_">String</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">match</span>调用。正则表达式用来匹配字符串。</span><br><span class="line"></span><br><span class="line"><span class="title class_">Symbol</span>.<span class="property">replace</span></span><br><span class="line">方法，被<span class="title class_">String</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">replace</span>调用。正则表达式用来替换字符串中匹配的子串。</span><br><span class="line"></span><br><span class="line"><span class="title class_">Symbol</span>.<span class="property">search</span></span><br><span class="line">方法，被<span class="title class_">String</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">search</span>调用。正则表达式返回被匹配部分在字符串中的索引。</span><br><span class="line"></span><br><span class="line"><span class="title class_">Symbol</span>.<span class="property">species</span></span><br><span class="line">函数值，为一个构造函数。用来创建派生对象。</span><br><span class="line"></span><br><span class="line"><span class="title class_">Symbol</span>.<span class="property">split</span></span><br><span class="line">方法，被<span class="title class_">String</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">split</span>调用。正则表达式来用分割字符串。</span><br><span class="line"></span><br><span class="line"><span class="title class_">Symbol</span>.<span class="property">toPrimitive</span></span><br><span class="line">方法，被<span class="title class_">ToPrimitive</span>抽象操作调用。把对象转换为相应的原始值。</span><br><span class="line"></span><br><span class="line"><span class="title class_">Symbol</span>.<span class="property">toStringTag</span></span><br><span class="line">方法，被内置方法<span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>调用。返回创建对象时默认的字符串描述。</span><br><span class="line"></span><br><span class="line"><span class="title class_">Symbol</span>.<span class="property">unscopables</span></span><br><span class="line">对象，它自己拥有的属性会被<span class="keyword">with</span>作用域排除在外。</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="13-泛型"><a href="#13-泛型" class="headerlink" title="13 泛型"></a>13 泛型</h2><h3 id="13-1-函数泛型"><a href="#13-1-函数泛型" class="headerlink" title="13.1 函数泛型"></a>13.1 函数泛型</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">num</span> (<span class="attr">a</span>:number,<span class="attr">b</span>:number) : <span class="title class_">Array</span>&lt;number&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> [a ,b];</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">num</span>(<span class="number">1</span>,<span class="number">2</span>)</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">str</span> (<span class="attr">a</span>:string,<span class="attr">b</span>:string) : <span class="title class_">Array</span>&lt;string&gt; &#123;</span><br><span class="line">    <span class="keyword">return</span> [a ,b];</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">str</span>(<span class="string">&#x27;独孤&#x27;</span>,<span class="string">&#x27;求败&#x27;</span>)</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 泛型优化</span></span><br><span class="line"><span class="comment">// 语法为函数名字后面跟一个&lt;参数名&gt; 参数名可以随便写 例如我这儿写了T</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 当我们使用这个函数的时候把参数的类型传进去就可以了 （也就是动态类型）</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title class_">Add</span>&lt;T&gt;(<span class="attr">a</span>: T, <span class="attr">b</span>: T): <span class="title class_">Array</span>&lt;T&gt;  &#123;</span><br><span class="line">    <span class="keyword">return</span> [a,b]</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="title class_">Add</span>&lt;number&gt;(<span class="number">1</span>,<span class="number">2</span>)</span><br><span class="line"><span class="title class_">Add</span>&lt;string&gt;(<span class="string">&#x27;1&#x27;</span>,<span class="string">&#x27;2&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 我们也可以使用不同的泛型参数名，只要在数量上和使用方式上能对应上就可以。</span></span><br><span class="line"><span class="keyword">function</span> <span class="title class_">Sub</span>&lt;T,U&gt;(<span class="attr">a</span>:T,<span class="attr">b</span>:U):<span class="title class_">Array</span>&lt;T|U&gt; &#123;</span><br><span class="line">    <span class="keyword">const</span> <span class="attr">params</span>:<span class="title class_">Array</span>&lt;T|U&gt; = [a,b]</span><br><span class="line">    <span class="keyword">return</span> params</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"><span class="title class_">Sub</span>&lt;<span class="title class_">Boolean</span>,number&gt;(<span class="literal">false</span>,<span class="number">1</span>)</span><br></pre></td></tr></table></figure>

<h3 id="13-2-定义泛型接口"><a href="#13-2-定义泛型接口" class="headerlink" title="13.2 定义泛型接口"></a>13.2 定义泛型接口</h3><p><strong>声明接口的时候 在名字后面加一个&lt;参数&gt;</strong></p>
<p><strong>使用的时候传递类型</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">interface <span class="title class_">MyInter</span>&lt;T&gt; &#123;</span><br><span class="line">   (<span class="attr">arg</span>: T): T</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">function</span> fn&lt;T&gt;(<span class="attr">arg</span>: T): T &#123;</span><br><span class="line">   <span class="keyword">return</span> arg</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">let</span> <span class="attr">result</span>: <span class="title class_">MyInter</span>&lt;number&gt; = fn</span><br><span class="line"> </span><br><span class="line"><span class="title function_">result</span>(<span class="number">123</span>)</span><br></pre></td></tr></table></figure>

<h3 id="13-3-对象字面量泛型"><a href="#13-3-对象字面量泛型" class="headerlink" title="13.3 对象字面量泛型"></a>13.3 对象字面量泛型</h3><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="attr">foo</span>: &#123; &lt;T&gt;(<span class="attr">arg</span>: T): T &#125;</span><br><span class="line"> </span><br><span class="line">foo = <span class="keyword">function</span> &lt;T&gt;(<span class="attr">arg</span>:T):T &#123;</span><br><span class="line">   <span class="keyword">return</span> arg</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="title function_">foo</span>(<span class="number">123</span>)</span><br></pre></td></tr></table></figure>

<h3 id="13-4-泛型约束"><a href="#13-4-泛型约束" class="headerlink" title="13.4 泛型约束"></a>13.4 泛型约束</h3><p><strong>我们期望在一个泛型的变量上面，获取其<code>length</code>参数，但是，有的数据类型是没有<code>length</code>属性的</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">interface <span class="title class_">Len</span> &#123;</span><br><span class="line">   <span class="attr">length</span>:number</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">function</span> getLegnth&lt;T <span class="keyword">extends</span> <span class="title class_">Len</span>&gt;(<span class="attr">arg</span>:T) &#123;</span><br><span class="line">  <span class="keyword">return</span> arg.<span class="property">length</span></span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">getLegnth&lt;string&gt;(<span class="string">&#x27;123&#x27;</span>)</span><br></pre></td></tr></table></figure>

<h3 id="13-5-使用keyof约束对象"><a href="#13-5-使用keyof约束对象" class="headerlink" title="13.5 使用keyof约束对象"></a>13.5 使用keyof约束对象</h3><p><strong>其中使用了TS泛型和泛型约束。首先定义了T类型并使用extends关键字继承object类型的子类型，然后使用keyof操作符获取T类型的所有键，它的返回 类型是联合 类型，最后利用extends关键字约束 K类型必须为keyof T联合类型的子类型</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">function</span> prop&lt;T, K <span class="keyword">extends</span> keyof T&gt;(<span class="attr">obj</span>: T, <span class="attr">key</span>: K) &#123;</span><br><span class="line">   <span class="keyword">return</span> obj[key]</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"><span class="keyword">let</span> o = &#123; <span class="attr">a</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">2</span>, <span class="attr">c</span>: <span class="number">3</span> &#125;</span><br><span class="line"> </span><br><span class="line"><span class="title function_">prop</span>(o, <span class="string">&#x27;a&#x27;</span>) </span><br><span class="line"><span class="title function_">prop</span>(o, <span class="string">&#x27;d&#x27;</span>) <span class="comment">//此时就会报错发现找不到</span></span><br></pre></td></tr></table></figure>

<h3 id="13-6-泛型类"><a href="#13-6-泛型类" class="headerlink" title="13.6 泛型类"></a>13.6 泛型类</h3><p><strong>声明方法跟函数类似名称后面定义&lt;类型&gt;</strong></p>
<p><strong>使用的时候确定类型new Sub()</strong></p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Sub</span>&lt;T&gt;&#123;</span><br><span class="line">   <span class="attr">attr</span>: T[] = [];</span><br><span class="line">   add (<span class="attr">a</span>:T):T[] &#123;</span><br><span class="line">      <span class="keyword">return</span> [a]</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="keyword">let</span> s = <span class="keyword">new</span> <span class="title class_">Sub</span>&lt;number&gt;()</span><br><span class="line">s.<span class="property">attr</span> = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line">s.<span class="title function_">add</span>(<span class="number">123</span>)</span><br><span class="line"> </span><br><span class="line"><span class="keyword">let</span> str = <span class="keyword">new</span> <span class="title class_">Sub</span>&lt;string&gt;()</span><br><span class="line">str.<span class="property">attr</span> = [<span class="string">&#x27;1&#x27;</span>,<span class="string">&#x27;2&#x27;</span>,<span class="string">&#x27;3&#x27;</span>]</span><br><span class="line">str.<span class="title function_">add</span>(<span class="string">&#x27;123&#x27;</span>)</span><br></pre></td></tr></table></figure>

<h2 id="14-tsconfig-json配置文件"><a href="#14-tsconfig-json配置文件" class="headerlink" title="14 tsconfig.json配置文件"></a>14 tsconfig.json配置文件</h2><figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="string">&quot;compilerOptions&quot;</span>: &#123;</span><br><span class="line">  <span class="string">&quot;incremental&quot;</span>: <span class="literal">true</span>, <span class="comment">// TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度</span></span><br><span class="line">  <span class="string">&quot;tsBuildInfoFile&quot;</span>: <span class="string">&quot;./buildFile&quot;</span>, <span class="comment">// 增量编译文件的存储位置</span></span><br><span class="line">  <span class="string">&quot;diagnostics&quot;</span>: <span class="literal">true</span>, <span class="comment">// 打印诊断信息 </span></span><br><span class="line">  <span class="string">&quot;target&quot;</span>: <span class="string">&quot;ES5&quot;</span>, <span class="comment">// 目标语言的版本</span></span><br><span class="line">  <span class="string">&quot;module&quot;</span>: <span class="string">&quot;CommonJS&quot;</span>, <span class="comment">// 生成代码的模板标准</span></span><br><span class="line">  <span class="string">&quot;outFile&quot;</span>: <span class="string">&quot;./app.js&quot;</span>, <span class="comment">// 将多个相互依赖的文件生成一个文件，可以用在AMD模块中，即开启时应设置&quot;module&quot;: &quot;AMD&quot;,</span></span><br><span class="line">  <span class="string">&quot;lib&quot;</span>: [<span class="string">&quot;DOM&quot;</span>, <span class="string">&quot;ES2015&quot;</span>, <span class="string">&quot;ScriptHost&quot;</span>, <span class="string">&quot;ES2019.Array&quot;</span>], <span class="comment">// TS需要引用的库，即声明文件，es5 默认引用dom、es5、scripthost,如需要使用es的高级版本特性，通常都需要配置，如es8的数组新特性需要引入&quot;ES2019.Array&quot;,</span></span><br><span class="line">  <span class="string">&quot;allowJS&quot;</span>: <span class="literal">true</span>, <span class="comment">// 允许编译器编译JS，JSX文件</span></span><br><span class="line">  <span class="string">&quot;checkJs&quot;</span>: <span class="literal">true</span>, <span class="comment">// 允许在JS文件中报错，通常与allowJS一起使用</span></span><br><span class="line">  <span class="string">&quot;outDir&quot;</span>: <span class="string">&quot;./dist&quot;</span>, <span class="comment">// 指定输出目录</span></span><br><span class="line">  <span class="string">&quot;rootDir&quot;</span>: <span class="string">&quot;./&quot;</span>, <span class="comment">// 指定输出文件目录(用于输出)，用于控制输出目录结构</span></span><br><span class="line">  <span class="string">&quot;declaration&quot;</span>: <span class="literal">true</span>, <span class="comment">// 生成声明文件，开启后会自动生成声明文件</span></span><br><span class="line">  <span class="string">&quot;declarationDir&quot;</span>: <span class="string">&quot;./file&quot;</span>, <span class="comment">// 指定生成声明文件存放目录</span></span><br><span class="line">  <span class="string">&quot;emitDeclarationOnly&quot;</span>: <span class="literal">true</span>, <span class="comment">// 只生成声明文件，而不会生成js文件</span></span><br><span class="line">  <span class="string">&quot;sourceMap&quot;</span>: <span class="literal">true</span>, <span class="comment">// 生成目标文件的sourceMap文件</span></span><br><span class="line">  <span class="string">&quot;inlineSourceMap&quot;</span>: <span class="literal">true</span>, <span class="comment">// 生成目标文件的inline SourceMap，inline SourceMap会包含在生成的js文件中</span></span><br><span class="line">  <span class="string">&quot;declarationMap&quot;</span>: <span class="literal">true</span>, <span class="comment">// 为声明文件生成sourceMap</span></span><br><span class="line">  <span class="string">&quot;typeRoots&quot;</span>: [], <span class="comment">// 声明文件目录，默认时node_modules/@types</span></span><br><span class="line">  <span class="string">&quot;types&quot;</span>: [], <span class="comment">// 加载的声明文件包</span></span><br><span class="line">  <span class="string">&quot;removeComments&quot;</span>:<span class="literal">true</span>, <span class="comment">// 删除注释 </span></span><br><span class="line">  <span class="string">&quot;noEmit&quot;</span>: <span class="literal">true</span>, <span class="comment">// 不输出文件,即编译后不会生成任何js文件</span></span><br><span class="line">  <span class="string">&quot;noEmitOnError&quot;</span>: <span class="literal">true</span>, <span class="comment">// 发送错误时不输出任何文件</span></span><br><span class="line">  <span class="string">&quot;noEmitHelpers&quot;</span>: <span class="literal">true</span>, <span class="comment">// 不生成helper函数，减小体积，需要额外安装，常配合importHelpers一起使用</span></span><br><span class="line">  <span class="string">&quot;importHelpers&quot;</span>: <span class="literal">true</span>, <span class="comment">// 通过tslib引入helper函数，文件必须是模块</span></span><br><span class="line">  <span class="string">&quot;downlevelIteration&quot;</span>: <span class="literal">true</span>, <span class="comment">// 降级遍历器实现，如果目标源是es3/5，那么遍历器会有降级的实现</span></span><br><span class="line">  <span class="string">&quot;strict&quot;</span>: <span class="literal">true</span>, <span class="comment">// 开启所有严格的类型检查</span></span><br><span class="line">  <span class="string">&quot;alwaysStrict&quot;</span>: <span class="literal">true</span>, <span class="comment">// 在代码中注入&#x27;use strict&#x27;</span></span><br><span class="line">  <span class="string">&quot;noImplicitAny&quot;</span>: <span class="literal">true</span>, <span class="comment">// 不允许隐式的any类型</span></span><br><span class="line">  <span class="string">&quot;strictNullChecks&quot;</span>: <span class="literal">true</span>, <span class="comment">// 不允许把null、undefined赋值给其他类型的变量</span></span><br><span class="line">  <span class="string">&quot;strictFunctionTypes&quot;</span>: <span class="literal">true</span>, <span class="comment">// 不允许函数参数双向协变</span></span><br><span class="line">  <span class="string">&quot;strictPropertyInitialization&quot;</span>: <span class="literal">true</span>, <span class="comment">// 类的实例属性必须初始化</span></span><br><span class="line">  <span class="string">&quot;strictBindCallApply&quot;</span>: <span class="literal">true</span>, <span class="comment">// 严格的bind/call/apply检查</span></span><br><span class="line">  <span class="string">&quot;noImplicitThis&quot;</span>: <span class="literal">true</span>, <span class="comment">// 不允许this有隐式的any类型</span></span><br><span class="line">  <span class="string">&quot;noUnusedLocals&quot;</span>: <span class="literal">true</span>, <span class="comment">// 检查只声明、未使用的局部变量(只提示不报错)</span></span><br><span class="line">  <span class="string">&quot;noUnusedParameters&quot;</span>: <span class="literal">true</span>, <span class="comment">// 检查未使用的函数参数(只提示不报错)</span></span><br><span class="line">  <span class="string">&quot;noFallthroughCasesInSwitch&quot;</span>: <span class="literal">true</span>, <span class="comment">// 防止switch语句贯穿(即如果没有break语句后面不会执行)</span></span><br><span class="line">  <span class="string">&quot;noImplicitReturns&quot;</span>: <span class="literal">true</span>, <span class="comment">//每个分支都会有返回值</span></span><br><span class="line">  <span class="string">&quot;esModuleInterop&quot;</span>: <span class="literal">true</span>, <span class="comment">// 允许export=导出，由import from 导入</span></span><br><span class="line">  <span class="string">&quot;allowUmdGlobalAccess&quot;</span>: <span class="literal">true</span>, <span class="comment">// 允许在模块中全局变量的方式访问umd模块</span></span><br><span class="line">  <span class="string">&quot;moduleResolution&quot;</span>: <span class="string">&quot;node&quot;</span>, <span class="comment">// 模块解析策略，ts默认用node的解析策略，即相对的方式导入</span></span><br><span class="line">  <span class="string">&quot;baseUrl&quot;</span>: <span class="string">&quot;./&quot;</span>, <span class="comment">// 解析非相对模块的基地址，默认是当前目录</span></span><br><span class="line">  <span class="string">&quot;paths&quot;</span>: &#123; <span class="comment">// 路径映射，相对于baseUrl</span></span><br><span class="line">    <span class="comment">// 如使用jq时不想使用默认版本，而需要手动指定版本，可进行如下配置</span></span><br><span class="line">    <span class="string">&quot;jquery&quot;</span>: [<span class="string">&quot;node_modules/jquery/dist/jquery.min.js&quot;</span>]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="string">&quot;rootDirs&quot;</span>: [<span class="string">&quot;src&quot;</span>,<span class="string">&quot;out&quot;</span>], <span class="comment">// 将多个目录放在一个虚拟目录下，用于运行时，即编译后引入文件的位置可能发生变化，这也设置可以虚拟src和out在同一个目录下，不用再去改变路径也不会报错</span></span><br><span class="line">  <span class="string">&quot;listEmittedFiles&quot;</span>: <span class="literal">true</span>, <span class="comment">// 打印输出文件</span></span><br><span class="line">  <span class="string">&quot;listFiles&quot;</span>: <span class="literal">true</span><span class="comment">// 打印编译的文件(包括引用的声明文件)</span></span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）</span></span><br><span class="line"><span class="string">&quot;include&quot;</span>: [</span><br><span class="line">   <span class="string">&quot;src/**/*&quot;</span></span><br><span class="line">],</span><br><span class="line"><span class="comment">// 指定一个排除列表（include的反向操作）</span></span><br><span class="line"> <span class="string">&quot;exclude&quot;</span>: [</span><br><span class="line">   <span class="string">&quot;demo.ts&quot;</span></span><br><span class="line">],</span><br><span class="line"><span class="comment">// 指定哪些文件使用该配置（属于手动一个个指定文件）</span></span><br><span class="line"> <span class="string">&quot;files&quot;</span>: [</span><br><span class="line">   <span class="string">&quot;demo.ts&quot;</span></span><br><span class="line">]</span><br></pre></td></tr></table></figure>

</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://beifeng.gitee.io">阿龙</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://beifeng.gitee.io/2023/05/05/TypeScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">https://beifeng.gitee.io/2023/05/05/TypeScript学习笔记/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://beifeng.gitee.io" target="_blank">荒芜</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"></div><div class="post_share"><div class="social-share" data-image="/img/avatar.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="next-post pull-full"><a href="/2023/04/02/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E8%B7%B3%E8%BD%AC%E5%B0%8F%E7%A8%8B%E5%BA%8F/" title="微信公众号跳转小程序"><img class="cover" src="/img/loading.gif" data-original="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">微信公众号跳转小程序</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/loading.gif" data-original="/img/avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">阿龙</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">2</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://gitee.com/WinPro" target="_blank" title="Github"><i class="fab fa-github"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-TypeScript%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86"><span class="toc-number">1.</span> <span class="toc-text">1.TypeScript基础知识</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E5%9F%BA%E6%9C%AC%E7%B1%BB%E5%9E%8B"><span class="toc-number">2.</span> <span class="toc-text">1.基本类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E4%BB%BB%E6%84%8F%E7%B1%BB%E5%9E%8B"><span class="toc-number">2.1.</span> <span class="toc-text">2.任意类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E6%8E%A5%E5%8F%A3%E5%92%8C%E5%AF%B9%E8%B1%A1%E7%B1%BB%E5%9E%8B"><span class="toc-number">2.2.</span> <span class="toc-text">3.接口和对象类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1-%E5%8F%AF%E9%80%89%E5%B1%9E%E6%80%A7-%E4%BD%BF%E7%94%A8%EF%BC%9F%E6%93%8D%E4%BD%9C%E7%AC%A6"><span class="toc-number">2.3.</span> <span class="toc-text">3.1 可选属性 使用？操作符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-2-%E4%BB%BB%E6%84%8F%E5%B1%9E%E6%80%A7-propName-string"><span class="toc-number">2.4.</span> <span class="toc-text">3.2 任意属性[propName:string]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-3-%E5%8F%AA%E8%AF%BB%E5%B1%9E%E6%80%A7-readonly"><span class="toc-number">2.5.</span> <span class="toc-text">3.3 只读属性 readonly</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-4-%E6%B7%BB%E5%8A%A0%E5%87%BD%E6%95%B0"><span class="toc-number">2.6.</span> <span class="toc-text">3.4 添加函数</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-%E6%95%B0%E7%BB%84%E7%9A%84%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.</span> <span class="toc-text">4.数组的类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#4-1%E7%B1%BB%E5%9E%8B"><span class="toc-number">3.1.</span> <span class="toc-text">4.1类型[]</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-2-%E6%95%B0%E7%BB%84%E6%B3%9B%E5%9E%8B"><span class="toc-number">3.2.</span> <span class="toc-text">4.2 数组泛型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-3-%E7%94%A8%E6%8E%A5%E5%8F%A3%E8%A1%A8%E7%A4%BA%E6%95%B0%E7%BB%84"><span class="toc-number">3.3.</span> <span class="toc-text">4.3 用接口表示数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-4-%E5%A4%9A%E7%BB%B4%E6%95%B0%E7%BB%84"><span class="toc-number">3.4.</span> <span class="toc-text">4.4 多维数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-5-arguments%E7%B1%BB%E6%95%B0%E7%BB%84"><span class="toc-number">3.5.</span> <span class="toc-text">4.5 arguments类数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-6-any%E5%9C%A8%E6%95%B0%E7%BB%84%E4%B8%AD%E7%9A%84%E5%BA%94%E7%94%A8"><span class="toc-number">3.6.</span> <span class="toc-text">4.6 any在数组中的应用</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-%E5%87%BD%E6%95%B0%E6%89%A9%E5%B1%95"><span class="toc-number">4.</span> <span class="toc-text">5.函数扩展</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#5-1%E5%87%BD%E6%95%B0%E7%9A%84%E7%B1%BB%E5%9E%8B"><span class="toc-number">4.1.</span> <span class="toc-text">5.1函数的类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-2-%E5%87%BD%E6%95%B0%E7%9A%84%E5%8F%AF%E9%80%89%E5%8F%82%E6%95%B0%EF%BC%9F"><span class="toc-number">4.2.</span> <span class="toc-text">5.2 函数的可选参数？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-3-%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0%E7%9A%84%E9%BB%98%E8%AE%A4%E5%80%BC"><span class="toc-number">4.3.</span> <span class="toc-text">5.3 函数参数的默认值</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-4-%E6%8E%A5%E5%8F%A3%E5%AE%9A%E4%B9%89%E5%87%BD%E6%95%B0"><span class="toc-number">4.4.</span> <span class="toc-text">5.4 接口定义函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-5-%E5%AE%9A%E4%B9%89%E5%89%A9%E4%BD%99%E5%8F%82%E6%95%B0"><span class="toc-number">4.5.</span> <span class="toc-text">5.5 定义剩余参数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-6-%E5%87%BD%E6%95%B0%E9%87%8D%E8%BD%BD"><span class="toc-number">4.6.</span> <span class="toc-text">5.6 函数重载</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-%E7%B1%BB%E5%9E%8B%E6%96%AD%E8%A8%80%EF%BD%9C%E8%81%94%E5%90%88%E7%B1%BB%E5%9E%8B%EF%BD%9C%E4%BA%A4%E5%8F%89%E7%B1%BB%E5%9E%8B"><span class="toc-number">5.</span> <span class="toc-text">6 类型断言｜联合类型｜交叉类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#6-1%E8%81%94%E5%90%88%E7%B1%BB%E5%9E%8B"><span class="toc-number">5.1.</span> <span class="toc-text">6.1联合类型</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-2-%E4%BA%A4%E5%8F%89%E7%B1%BB%E5%9E%8B"><span class="toc-number">6.</span> <span class="toc-text">6.2 交叉类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#6-3-%E7%B1%BB%E5%9E%8B%E6%96%AD%E8%A8%80"><span class="toc-number">6.1.</span> <span class="toc-text">6.3 类型断言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-4-as-const"><span class="toc-number">6.2.</span> <span class="toc-text">6.4 as const</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1"><span class="toc-number">7.</span> <span class="toc-text">7 内置对象</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#7-1-Boolean%E3%80%81Number%E3%80%81string%E3%80%81RegExp%E3%80%81Date%E3%80%81Error"><span class="toc-number">7.1.</span> <span class="toc-text">7.1 Boolean、Number、string、RegExp、Date、Error</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-2-Dom%E5%92%8CBom%E7%9A%84%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1"><span class="toc-number">7.2.</span> <span class="toc-text">7.2 Dom和Bom的内置对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-3-%E5%AE%9A%E4%B9%89Promise"><span class="toc-number">7.3.</span> <span class="toc-text">7.3 定义Promise</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-Class%E7%B1%BB"><span class="toc-number">8.</span> <span class="toc-text">8 Class类</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#8-1-%E5%AE%9A%E4%B9%89%E7%B1%BB"><span class="toc-number">8.1.</span> <span class="toc-text">8.1 定义类</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-2%E7%B1%BB%E7%9A%84%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="toc-number">8.2.</span> <span class="toc-text">8.2类的修饰符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-3-static%E9%9D%99%E6%80%81%E5%B1%9E%E6%80%A7%E5%92%8C%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95"><span class="toc-number">8.3.</span> <span class="toc-text">8.3 static静态属性和静态方法</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-4-interface-%E5%AE%9A%E4%B9%89%E7%B1%BB"><span class="toc-number">8.4.</span> <span class="toc-text">8.4 interface 定义类</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-5-%E6%8A%BD%E8%B1%A1%E7%B1%BB"><span class="toc-number">8.5.</span> <span class="toc-text">8.5 抽象类</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-%E6%9E%9A%E4%B8%BE%E7%B1%BB%E5%9E%8B"><span class="toc-number">9.</span> <span class="toc-text">9 枚举类型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#9-1%E6%95%B0%E5%AD%97%E6%9E%9A%E4%B8%BE"><span class="toc-number">9.1.</span> <span class="toc-text">9.1数字枚举</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-2-%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%9E%9A%E4%B8%BE"><span class="toc-number">9.2.</span> <span class="toc-text">9.2 字符串枚举</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-3-%E5%BC%82%E6%9E%84%E6%9E%9A%E4%B8%BE"><span class="toc-number">9.3.</span> <span class="toc-text">9.3 异构枚举</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-4-%E6%8E%A5%E5%8F%A3%E6%9E%9A%E4%B8%BE"><span class="toc-number">9.4.</span> <span class="toc-text">9.4 接口枚举</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-5-const%E6%9E%9A%E4%B8%BE"><span class="toc-number">9.5.</span> <span class="toc-text">9.5 const枚举</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-6-%E5%8F%8D%E5%90%91%E6%98%A0%E5%B0%84"><span class="toc-number">9.6.</span> <span class="toc-text">9.6 反向映射</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-%E7%B1%BB%E5%9E%8B%E6%8E%A8%E6%96%AD%EF%BD%9C%E7%B1%BB%E5%9E%8B%E5%88%AB%E5%90%8D"><span class="toc-number">10.</span> <span class="toc-text">10 类型推断｜类型别名</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#10-1-%E7%B1%BB%E5%9E%8B%E6%8E%A8%E6%96%AD"><span class="toc-number">10.1.</span> <span class="toc-text">10.1 类型推断</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#10-2-%E7%B1%BB%E5%9E%8B%E5%88%AB%E5%90%8D"><span class="toc-number">10.2.</span> <span class="toc-text">10.2 类型别名</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-never%E7%B1%BB%E5%9E%8B"><span class="toc-number">11.</span> <span class="toc-text">11 never类型</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#never-%E5%92%8C-void-%E7%9A%84%E5%B7%AE%E5%BC%82"><span class="toc-number">11.0.0.1.</span> <span class="toc-text">never 和 void 的差异</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-Symbol%E7%B1%BB%E5%9E%8B"><span class="toc-number">12.</span> <span class="toc-text">12 Symbol类型</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#Symbol-iterator%E8%BF%AD%E4%BB%A3%E5%99%A8%E5%92%8C%E7%94%9F%E6%88%90%E5%99%A8for-of"><span class="toc-number">12.0.0.0.1.</span> <span class="toc-text">Symbol.iterator迭代器和生成器for of</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E6%94%AF%E6%8C%81%E9%81%8D%E5%8E%86%E5%A4%A7%E9%83%A8%E5%88%86%E7%B1%BB%E5%9E%8B%E8%BF%AD%E4%BB%A3%E5%99%A8-arr-nodeList-argumetns-set-map-%E7%AD%89"><span class="toc-number">12.0.0.0.2.</span> <span class="toc-text">支持遍历大部分类型迭代器 arr nodeList argumetns set map 等</span></a></li></ol></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-%E6%B3%9B%E5%9E%8B"><span class="toc-number">13.</span> <span class="toc-text">13 泛型</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#13-1-%E5%87%BD%E6%95%B0%E6%B3%9B%E5%9E%8B"><span class="toc-number">13.1.</span> <span class="toc-text">13.1 函数泛型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#13-2-%E5%AE%9A%E4%B9%89%E6%B3%9B%E5%9E%8B%E6%8E%A5%E5%8F%A3"><span class="toc-number">13.2.</span> <span class="toc-text">13.2 定义泛型接口</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#13-3-%E5%AF%B9%E8%B1%A1%E5%AD%97%E9%9D%A2%E9%87%8F%E6%B3%9B%E5%9E%8B"><span class="toc-number">13.3.</span> <span class="toc-text">13.3 对象字面量泛型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#13-4-%E6%B3%9B%E5%9E%8B%E7%BA%A6%E6%9D%9F"><span class="toc-number">13.4.</span> <span class="toc-text">13.4 泛型约束</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#13-5-%E4%BD%BF%E7%94%A8keyof%E7%BA%A6%E6%9D%9F%E5%AF%B9%E8%B1%A1"><span class="toc-number">13.5.</span> <span class="toc-text">13.5 使用keyof约束对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#13-6-%E6%B3%9B%E5%9E%8B%E7%B1%BB"><span class="toc-number">13.6.</span> <span class="toc-text">13.6 泛型类</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#14-tsconfig-json%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="toc-number">14.</span> <span class="toc-text">14 tsconfig.json配置文件</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/05/05/TypeScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" title="TypeScript学习笔记">TypeScript学习笔记</a><time datetime="2023-05-05T02:01:39.000Z" title="发表于 2023-05-05 10:01:39">2023-05-05</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/04/02/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E8%B7%B3%E8%BD%AC%E5%B0%8F%E7%A8%8B%E5%BA%8F/" title="微信公众号跳转小程序"><img src="/img/loading.gif" data-original="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="微信公众号跳转小程序"/></a><div class="content"><a class="title" href="/2023/04/02/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E8%B7%B3%E8%BD%AC%E5%B0%8F%E7%A8%8B%E5%BA%8F/" title="微信公众号跳转小程序">微信公众号跳转小程序</a><time datetime="2023-04-02T13:18:47.000Z" title="发表于 2023-04-02 21:18:47">2023-04-02</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By 阿龙</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><div class="js-pjax"></div><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-nest.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div>
        <style>
            [bg-lazy] {
                background-image: none !important;
                background-color: #eee !important;
            }
        </style>
        <script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 1,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(r){r.imageLazyLoadSetting.processImages=t;var e=r.imageLazyLoadSetting.isSPA,n=r.imageLazyLoadSetting.preloadRatio||1,c=a();function a(){var t=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")),e=Array.prototype.slice.call(document.querySelectorAll("[bg-lazy]"));return t.concat(e)}function t(){e&&(c=a());for(var t,o=0;o<c.length;o++)0<=(t=(t=c[o]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(r.innerHeight*n||document.documentElement.clientHeight*n)&&function(){var t,e,n,a,i=c[o];e=function(){c=c.filter(function(t){return i!==t}),r.imageLazyLoadSetting.onImageLoaded&&r.imageLazyLoadSetting.onImageLoaded(i)},(t=i).hasAttribute("bg-lazy")?(t.removeAttribute("bg-lazy"),e&&e()):(n=new Image,a=t.getAttribute("data-original"),n.onload=function(){t.src=a,t.removeAttribute("data-original"),e&&e()},t.src!==a&&(n.src=a))}()}function i(){clearTimeout(t.tId),t.tId=setTimeout(t,500)}t(),document.addEventListener("scroll",i),r.addEventListener("resize",i),r.addEventListener("orientationchange",i)}(this);</script></body></html>